<template>
    <div class="roles">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 主体部分 -->
        <br>
        <el-card>
            <el-row :gutter="20">
                <el-col>
                    <el-button type="primary">添加角色</el-button>
                </el-col>
            </el-row>
            <br>
            <el-table :data="rolesList" border stripe style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="{row}">
                        <el-row :class="[i1 == 0 ? 'topbd' : 'center']" v-for="(item1, i1) in row.children" :key="item1.id">
                            <el-col :span="5">
                                <el-tag closable>{{ item1.authName }}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="19">
                                <el-row :class="[i2 == 0 ? 'topbd' : 'center']" v-for="(item2, i2) in item1.children"
                                    :key="item2.id">
                                    <el-col :span="6">
                                        <el-tag closable>{{ item2.authName }}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18" :class="[i2 == 0 ? 'topbd' : 'center']">
                                        <el-tag closable v-for="item3 in item2.children" :key="item3">{{ item3.authName
                                        }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="roleName" label="角色名称"></el-table-column>
                <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{row}">
                        <el-button icon="el-icon-edit" type="primary" size="mini">编辑</el-button>
                        <el-button icon="el-icon-delete" type="danger" size="mini">删除</el-button>
                        <el-button icon="el-icon-setting" type="warning" size="mini"
                            @click="showSetRightDialog(row)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 弹框 -->
<!--  show-checkbox 是否显示多选框
node-key 数据唯一标识符 
:default-expanded-keys="[2, 3]" 默认展开
default-checked-keys	默认勾选的节点的 key 的数组
default-expand-all 默认展开全部节点-->
        <el-dialog title="分配权限" :visible.sync="setRightDialogVisible">
            <el-tree :data="rightsList"  ref="treeRef"
                show-checkbox node-key="id" 
                :default-checked-keys="defKeys"
                :props="treeProps" default-expand-all>      
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="setRightDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setRights">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getRoles, getRights , setRights } from '@/api/roles.js'
export default {
    name: "roles-com",
    data() {
        return {
            rolesList: [],
            setRightDialogVisible: false,//控制 权限配方弹框
            rightsList: [],//权限列表
            // 树形控件的属性绑定对象
            treeProps: {
                label: 'authName',
                children: 'children'
            },   
            defKeys:[] , //默认选择中的id   
            roleId:''  
        }
    },
    created() {
        this.getRoles()
    },
    methods: {
        async getRoles() {
            //发送请求 
            let { data: { data, meta } } = await getRoles()
            // 判断
            if (meta.status != 200) return this.$message("角色列表请求失败!")
            // 赋值
            this.rolesList = data
            console.log(this.rolesList.id);
        },
        // 点击分配权限 弹出 弹框
        async showSetRightDialog(row) {
            this.roleId = row.id//留着角色的id;
            let { data: { data, meta } } = await getRights()
            if (meta.status != 200) return this.$message("权限数据列表亲戚失败!")
            this.rightsList = data;//赋值
            console.log( this.rightsList);
            this.getLeafKeys(row ,this.defKeys )
            this.setRightDialogVisible = true;
        },
        // 通过递归的方式 获取第三级数据的id 
        getLeafKeys(node,arr){
          if(!node.children){
             return arr.push(node.id)
          }  
          node.children.forEach(item => this.getLeafKeys(item,arr))
        },
       async setRights(){
            //                全选                                       半选
            const keys = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]
            const idStr = keys.join(',')
            let {data:{meta}} = await setRights({rids:idStr}, this.roleId)
            if(meta.status!=200) return this.$message("权限分配失败!")
            this.$message.success("权限分配成功!")
            this.getRoles()//更新数据
            this.setRightDialogVisible = false
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-breadcrumb__inner {
    font-size: 12px;
}

.topbd {
    border-top: 1px solid #eee;
    margin: 5px 0 5px 0;
}

.center {
    display: flex;
    align-items: center;
}
</style>
